<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>{:isset($info['id'])?'编辑':'新增'}作品</h2>
    </div>
    <form action="{:U()}" method="post" class="form-horizontal">
        <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
        <div class="form-item">
            <label class="item-label">作品名称<span class="check-tips"></span></label>
            <div class="controls">
                <input type="text" class="text input-large" name="wname" value="{$info.wname|default=''}">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">门店名称<span class="check-tips"></span></label>
            <div class="controls">
                <select id='sid'>
                    <option selected='selected' value=''>-选门店-</option>
                    <volist name="store" id="vo">
                        <option value="{$vo.id}" <if condition="$vo['id'] eq $info['sid']">selected='selected'</if>>{$vo.sname}</option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">设计师名称<span class="check-tips"></span></label>
            <div class="controls">
                <select name="did">
                    <option selected='selected' value=''>-选择设计师-</option>
                    <volist name="designer" id="vo">
                        <option value="{$vo.id}" <if condition="$vo['id'] eq $info['did']">selected='selected'</if>>{$vo.dname}</option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">作品图片<span class="check-tips">{:get_pic_des('works')}</span></label>
            <div class="controls">
                <input type="file" id="upload_picture_pic">                <style>
                .pic-table {
                    border: 1px solid #ccc;
                    width: 50%;
                }

                .pic-table td {
                    text-align: center;
                    padding: 5px;
                    width: 33%;
                }

                .pic-table thead {
                    text-align: center;
                    font-weight: bold;;
                }

                .pic-table tr {
                    border-bottom: 1px solid #ccc;
                }
            </style>
                <script>
                    $(function(){
                        // 删除图片操作
                        $('.pic-table')
                            // 移除图片
                                .on('click','.remove',function(){
                                    $(this).parents('tr').remove();
                                })
                            // 上移操作
                                .on('click','.up',function(){
                                    var tr = $(this).parents('tr');
                                    if(tr.index()==0) return false;
                                    tr.prev().before(tr.clone());
                                    tr.remove();
                                })
                            // 下移操作
                                .on('click','.down',function(){
                                    var tr = $(this).parents('tr');
                                    if(tr.index()==$('.pic-table>tbody>tr').length-1) return false;
                                    tr.next().after(tr.clone());
                                    tr.remove();
                                })

                    })
                </script>
                <table class="pic-table">
                    <thead>
                    <tr>
                        <td>图片</td>
                        <td>图片id</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    <volist name="info.pic" id="pic_id">
                        <tr>
                            <td>
                                <img src="{$pic_id|get_cover='path'}" style="max-width: 100px; max-height: 100px;"/>
                                <input type="hidden" name="pic[]" value="{$pic_id}"/>
                            </td>
                            <td></td>
                            <td>
                                <a href="javascript:void(0)" class="remove">移除</a>
                                <a href="javascript:void(0)" class="up">上移↑</a>
                                <a href="javascript:void(0)" class="down">下移↓</a>
                            </td>
                        </tr>
                    </volist>
                    </tbody>
                </table>
            </div>
            <script type="text/javascript">
                //上传图片
                /* 初始化上传插件 */
                $("#upload_picture_pic").uploadify({
                    "height": 30,
                    "swf": "__STATIC__/uploadify/uploadify.swf",
                    "fileObjName": "download",
                    "buttonText": "上传图片",
                    "uploader": "{:U('File/uploadPicture',array('session_id'=>session_id(),'type'=>'works'))}",
                    "width": 120,
                    'removeTimeout': 1,
                    'fileTypeExts': '*.jpg; *.png; *.gif;',
                    "onUploadSuccess": uploadPicturepic,
                    'onFallback': function () {
                        alert('未检测到兼容版本的Flash.');
                    }
                });
                function uploadPicturepic(file, data) {
                    var data = $.parseJSON(data);
                    var src = '';
                    if (data.status) {
                        $("#cover_id_pic").val(data.id);
                        src = data.url || '__ROOT__' + data.path
                        var html = '' +
                                '<tr>' +
                                '   <td>' +
                                '       <img src="' + src + '" style="max-width: 100px; max-height: 100px;"/>' +
                                '       <input type="hidden" name="pic[]" value="' + data.id + '"/>' +
                                '   </td>' +
                                '   <td>' + data.id + '</td>' +
                                '   <td>' +
                                '       <a href="javascript:void(0)" class="remove">移除</a>' +
                                '       <a href="javascript:void(0)" class="up">上移↑</a>' +
                                '       <a href="javascript:void(0)" class="down">下移↓</a>' +
                                '   </td>' +
                                '</tr>';
                        $('.pic-table tbody').append(html);
//                        $("#cover_id_pic").parent().find('.upload-img-box').html(
//                                '<div class="upload-pre-item"><img src="__ROOT__' + src + '"/></div>'
//                                );
                    } else {
                        updateAlert(data.info);
                        setTimeout(function () {
                            $('#top-alert').find('button').click();
                            $(that).removeClass('disabled').prop('disabled', false);
                        }, 1500);
                    }
                }
            </script>
            <div class="form-item">
            <label class="item-label">作品简介<span class="check-tips"></span></label>
            <div class="controls">
                <label class="textarea input-large">
                    <textarea name="explain">{$info.explain|default=''}</textarea>
                </label>
            </div>
        </div>
            <div class="form-item">
                <label class="item-label">作品内容<span class="check-tips"> </span></label>
                <div class="controls">
                    <textarea name="content">{$info.content}</textarea>
                    {:hook('adminArticleEdit', array('name'=>content,'value'=>$info['contnt']))}
                </div>
            </div>
            <div class="form-item">
                <label class="item-label">排序<span class="check-tips">（用于分组显示的顺序）</span></label>
                <div class="controls">
                    <input type="text" class="text input-small" name="sort" value="{$info.sort|default=0}">
                </div>
            </div>

            <div class="form-item">
                <input type="hidden" name="id" value="{$info.id|default=''}">
                <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
                <button class="btn btn-return" onclick="javascript:history.back(-1);
                        return false;">返 回</button>
            </div>
    </form>
</block>

<block name="script">
    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('index')}");
        $("#sid").change(function(){
            var sid =$(this).val();
            //请求数据
            $.post("{:U('Works/getDesigner')}",{sid:sid},function(data){    
                $("select[name='did']").empty();
                var html="<option selected='selected' value=''>-选择设计师-</option>";
                for(var i=0;i<data.length;i++){
                    html+="<option value='"+data[i]["id"]+"'>"+data[i]["dname"]+"</option>";
                }
                $("select[name='did']").html(html);
            },"json");
        });
    </script>
</block>